<style lang="scss" scoped>
	@import '../../assets/login.scss';

	.save-btn {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		align-items: center;
		justify-content: center;
		background-color: #179afe;
		font-size: 0.3rem;
		color: #ffffff;
		z-index: 99;
	}
</style>

<template>
	<div class="container hasNav hasTabbar">
		<van-nav-bar title="服务总结" left-arrow left-text="返回" @click-left="$router.back()" fixed>
		</van-nav-bar>

		<div class="form">
			<van-field v-model="form.sourceofNo" center readonly clickable label="号源来源" placeholder="选择来源"
				input-align="right" is-link @click="showSourceOptions = true" />
			</van-form>

			<van-field v-model="form.doctorName" center clickable label="医生姓名" placeholder="请输入看诊医生姓名"
				input-align="right" />

			<van-field v-model="form.jobtitle" center readonly clickable label="专家职称" placeholder="请选择专家职称"
				input-align="right" is-link @click="showTitleSelector" />

			<van-field v-model="form.department" center readonly clickable label="科室" placeholder="请选择科室"
				input-align="right" is-link @click="showDeptSelector" />

			<van-field v-model="form.cost" label="挂号费" type="number" placeholder="请输入挂号费" input-align="right">
			</van-field>

			<van-field v-model="form.costDrug" label="药费" type="number" placeholder="请输入药费" input-align="right">
			</van-field>

			<van-field :value="checkDetail" label="检查" type="number" placeholder="检查内容和费用" input-align="right" readonly
				is-link @click="showCheckDialog = true"></van-field>

			<van-field label="代约服务" input-align="right" readonly>
				<template slot="right-icon">
					<van-radio-group v-model="form.isSomeServices" direction="horizontal">
						<van-radio :name="0">否</van-radio>
						<van-radio :name="1">是</van-radio>
					</van-radio-group>
				</template>
			</van-field>

			<van-field :value="referralDate" label="复诊日期" input-align="right" readonly is-link placeholder="请选择复诊日期"
				@click="showDatePicker = true"></van-field>

			<van-cell-group title="病情诊断">
				<van-field v-model="form.diseaseDiagnosis" type="textarea" rows="2" autosize colon maxlength="1000"
					show-word-limit placeholder="请输入病情诊断" clearable></van-field>
			</van-cell-group>

			<van-cell-group title="资料交接">
				<van-field v-model="form.dataTransfer" type="textarea" rows="2" autosize colon maxlength="1000"
					show-word-limit placeholder="请输入病情诊断" clearable></van-field>
			</van-cell-group>

			<van-cell-group title="就诊原因">
				<van-field v-model="form.medicalReasons" type="textarea" rows="2" autosize colon maxlength="1000"
					show-word-limit placeholder="请输入病情诊断" clearable></van-field>
			</van-cell-group>

			<van-cell-group title="用药">
				<van-field v-model="form.medication" type="textarea" rows="2" autosize colon maxlength="1000"
					show-word-limit placeholder="请输入病情诊断" clearable></van-field>
			</van-cell-group>

			<van-cell-group title="诊断建议">
				<van-field v-model="form.diagnosticAdvice" type="textarea" rows="2" autosize colon maxlength="1000"
					show-word-limit placeholder="请输入病情诊断" clearable></van-field>
			</van-cell-group>

			<van-field label="提前一天取资料" label-width="100" input-align="right" readonly>
				<template slot="right-icon">
					<van-radio-group v-model="form.isAheadTakeData" direction="horizontal">
						<van-radio :name="0">否</van-radio>
						<van-radio :name="1">是</van-radio>
					</van-radio-group>
				</template>
			</van-field>

			<van-field label="服务是否有后续" label-width="100" input-align="right" readonly>
				<template slot="right-icon">
					<van-radio-group v-model="form.serviceHasFollowUp" direction="horizontal">
						<van-radio :name="0">否</van-radio>
						<van-radio :name="1">是</van-radio>
					</van-radio-group>
				</template>
			</van-field>

			<van-cell-group title="备注">
				<van-field v-model="form.description" type="textarea" rows="2" autosize colon maxlength="1000"
					show-word-limit placeholder="请输入病情诊断" clearable></van-field>
			</van-cell-group>

			<div class="save-btn" @click="sendFn">保存</div>
		</div>

		<van-popup v-model="showSourceOptions" round position="bottom">
			<van-picker show-toolbar :columns="source" @cancel="showSourceOptions = false" @confirm="selectSource" />
		</van-popup>

		<CascaderSelector ref="CascaderSelector" :title="cascaderTitle" :key-name="cascaderKey"
			@on-change="handleCascaderChange" @on-finish="handleCascaderFinish"></CascaderSelector>

		<van-dialog v-model="showCheckDialog" title="检查内容" show-cancel-button confirmButtonColor="#179AFE"
			@confirm="showCheckDialog = false" @cancel="cancelSet">
			<van-form>
				<van-field v-model="form.checkContent" label="检查:" label-width="40" placeholder="请输入检查内容"
					:border="false" clearable></van-field>
				<van-field v-model="form.checkCost" label="费用:" label-width="40" type="number" placeholder="请输入检查费用"
					:border="false" clearable></van-field>
				<van-field v-model="form.checkResult" label="结果:" label-width="40" placeholder="请输入检查结果" :border="false"
					clearable></van-field>
			</van-form>
		</van-dialog>

		<van-popup v-model="showDatePicker" round position="bottom">
			<van-datetime-picker type="datetime" title="选择复诊时间" :min-date="minDate" @cancel="showDatePicker = false"
				@confirm="setFormTime" />
		</van-popup>

		<loading :isShow="loading"></loading>
	</div>
</template>

<script>
	import {
		getSummary,
		saveSummary
	} from '../../api/order';
	import {
		getDeptBig,
		getDeptSmall,
		getJobTitle
	} from "../../api/user";

	import CascaderSelector from '../../components/CascaderSelector';
	import Loading from '../../components/Loading';

	export default {
		name: 'Summary',
		components: {
			Loading,
			CascaderSelector
		},
		data() {
			const {
				id
			} = this.$route.query;

			return {
				loading: false,
				id,
				source: ['网上预约', '医生加号', '现场挂号', '提前看诊', '提前检查', '不需要安排号源'],
				showSourceOptions: false,
				showCheckDialog: false,
				showDatePicker: false,
				minDate: new Date(),
				cascaderTitle: '',
				cascaderKey: '',
				form: {},
				formCache: ''
			}
		},
		computed: {
			checkDetail() {
				if (this.form.checkContent || this.form.checkCost) {
					return this.form.checkContent + ' ' + this.form.checkCost;
				} else {
					return '';
				}
			},
			referralDate() {
				return this.form.referralDate > 0 ? this.$moment(this.form.referralDate).format('YYYY-MM-DD HH:mm:ss') :
				'';
			}
		},
		async beforeMount() {
			await this.getSummaryData();
		},
		methods: {
			//选择号源来源
			selectSource(value) {
				this.form.sourceofNo = value;
				this.showSourceOptions = false;
			},
			async showTitleSelector() {
				const data = await this.getJobTitle();
				this.cascaderKey = 'title';
				this.cascaderTitle = '请选择职称';
				this.$refs.CascaderSelector.show(data);
			},
			async showDeptSelector() {
				const data = await this.getDeptBig();
				this.cascaderKey = 'department';
				this.cascaderTitle = '请选择科室';
				this.$refs.CascaderSelector.show(data);
			},
			async getDeptBig() {
				const {
					departments
				} = await getDeptBig()
				return departments.map(k => {
					return {
						text: k.departmentName,
						value: k.departmentId,
						children: []
					}
				})
			},
			async getDeptSmall(departmentId) {
				const {
					departments
				} = await getDeptSmall(departmentId)
				return departments.map(k => {
					return {
						text: k.departmentName,
						value: k.departmentId
					}
				})
			},
			async getJobTitle(departmentId) {
				const {
					jobtitles
				} = await getJobTitle(departmentId)
				return jobtitles.map(k => {
					return {
						text: k.jobtitleName,
						value: k.jobtitleId
					}
				})
			},
			async handleCascaderChange(data) {
				// 科室
				if (this.cascaderKey === 'department') {
					if (data.level === 0) {
						const depts = await this.getDeptSmall(data.value)
						this.$refs.CascaderSelector.getDatas(data.value, depts);
					}
				}
			},
			async handleCascaderFinish(data) {
				let last = data.pop();
				if (this.cascaderKey === 'department') {
					this.form.department = last.text;
				}
				if (this.cascaderKey === 'title') {
					this.form.jobtitle = last.text;
				}
			},
			async getSummaryData() {
				try {
					this.loading = true;

					const {
						errorcode,
						errormsg,
						serviceSummary
					} = await getSummary({
						recordId: this.id
					});

					if (errorcode == 0) {
						this.form = serviceSummary;
						this.formCache = JSON.stringify(serviceSummary);

						this.$nextTick(() => {
							this.loading = false;
						});
					} else {
						this.$toast(errormsg);
					}
					this.loading = false;
				} catch (error) {
					console.log(error);
				}
			},
			cancelSet() {
				try {
					['checkContent', 'checkCost', 'checkResult'].map(key => {
						this.form[key] = JSON.parse(this.formCache)[key];
					});
				} catch (error) {
					console.log(error);
				}
			},
			setFormTime(time) {
				this.form.referralDate = new Date(time).getTime();
				this.showDatePicker = false;
			},
			async sendFn() {
				try {
					const params = {
						recordId: this.id,
						...this.form,
						systemPlatform: '1'
					};

					const extra = {
						file_examinationReport: '',
						file_medicalRecord: '',
						file_other: ''
					}

					const {
						errorcode,
						errormsg
					} = await saveSummary(params, extra);

					if (errorcode == 0) {
						this.$toast('保存成功');
						this.getSummaryData();
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					console.log(error);
				}
			}
		}
	}
</script>
